<template>
  <div class="KongList">
    <div class="KongList-title">
      <span v-if="columnName">{{ columnName }}</span>
      <span v-else>列表</span>
    </div>
    <div class="KongList-content" v-if="columnContent.length != 0">
      <template v-for="(item, index) in columnContent">
        <div class="ColumnList-content-box" @mouseenter="mouseenter(item, index)" @mouseleave="mouseleave(item)">

          <div>
            <img class="picture" src="../../../assets/icon-kong-list.png" alt="">
          </div>
          <div class="name">企课</div>

          <div v-if="isShowBottom && index === currentMouseIndex" class="bottom">
            <img class="edit" @click="editItem(index)" src="../../../assets/icon-edit.png" alt="">
            <span class="div">|</span>
            <img class="delete" @click="deleteItem(index)" src="../../../assets/icon-delete.png" alt="">
          </div>

        </div>
      </template>

      <div class="ColumnList-content-empty" @click="addItem">
        <img class="icon-empty-img" src="../../../assets/icon-kong-list2.png">

      </div>
    </div>

  </div>
</template>

<script type="ts" setup>

import { ref, defineProps, computed } from 'vue'

const props = defineProps({
  attrData: {
    type: Object
  },
  updateColumn: {
    type: Function
  }
})

const columnName = computed(() => {
  return props.attrData.columnName;
})

const columnContent = computed(() => {
  return [1, 2, 3, 4, 5, 6];
  // return props.attrData.columnContent || [];
})

const isShowBottom = ref(false)
const currentMouseIndex = ref(-1)
const mouseenter = (item,index) => {
  isShowBottom.value = true;
  currentMouseIndex.value = index;
};

const mouseleave = (item) => {
  isShowBottom.value = false;
};

const addItem = () => {
  console.log("kong addItem")
  props.updateColumn({
    "columnName": columnName.value
  })
}

const editItem = (index) => {
  console.log("kong editItem")
  const item = columnContent.value[index]
  props.updateColumn({
    "columnName": columnName.value,
    ...item
  })
}

const deleteItem = (index) => {
  console.log("kong deleteItem")
  columnContent.value.splice(index, 1)
}

</script>

<style lang="scss" scoped>
.KongList {
  .KongList-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
  }

  .ColumnList-content-empty {

    position: reactive;
    top: 0px;
    margin-top: 8px;
    margin-left: 8px;

    .icon-empty-img {
      width: 50px;
    }
  }


  .KongList-content {
    display: flex;
    flex-wrap: wrap;


    .ColumnList-content-box {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 70px;
      justify-content: center;
      align-items: center;

      .picture {
        width: 100%;
        width: 50px;
        height: 50px;
      }

      .bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        background-color: rgba(0,0,0,0.1);

        .edit {
          width: 20px;
        }

        .delete {
          width: 20px;
        }


      }
    }
  }

}
</style>
